<template>
  <div class="help">
    <van-nav-bar
      @click-left="$router.go(-1)"
      left-arrow
      title="帮助中心"
      fixed
    ></van-nav-bar>
    <div class="header">
      <img src="../../assets/images/help/help.png" alt="" />
    </div>
    <div class="content">
      <div class="content-title">
        <img src="../../assets/images/invite/shu.png" alt="" />
        <h3>常见问题</h3>
      </div>
      <div class="content-contents">
        <van-list
          v-model="loading"
          :finished="finished"
          :immediate-check="false"
          @load="onLoad"
        >
          <!-- :icon="require('../../assets/images/help/huoke.png')" -->
          <van-cell
            v-for="(item, index) in helpArr"
            :key="index"
            center
            :icon="item.cover"
            :title="item.title"
            :label="item.description"
            is-link
            @click="$router.push(`/detail?id=${item.id}&help=1`)"
          />
        </van-list>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      wxUserInfo: {},
      helpArr: [], //列表
      loading: false, //加载状态
      finished: false, //完成
      page: 1, //页数
      limit: 8, //条数
      totalPage: "", //总页数
    };
  },
  async mounted() {
    this.wxUserInfo = JSON.parse(sessionStorage.getItem("userWxData"));

    // 获取个人信息
    await this.$store.dispatch("updateUserInfo");

    this.gethelpArr();
  },
  methods: {
    //触底下一页
    onLoad() {
      if (this.page >= this.totalPage) {
        this.finished = true;
        return;
      }
      this.page++;

      this.gethelpArr();
      // 加载状态结束
      this.loading = false;
    },
    //获取文章列表
    async gethelpArr() {
      let obj = {
        page: this.page,
        limit: this.limit,
        type: 7,
        userId: sessionStorage.getItem("agentId"),
        openId: this.wxUserInfo.openid,
        name: this.wxUserInfo.nickname,
        image: this.wxUserInfo.headimgurl,
        sex: this.wxUserInfo.sex,
        city: this.wxUserInfo.city,
        province: this.wxUserInfo.province,
        tableType: 1,
        account: 1,
        status: 2,
        operation: 4,
        title: "",
        articleStoreType: 30,
      };

      let res = await this.$api.getArticleArr(obj);

      if (res.code != 0) return;

      if (this.page == 1) {
        this.helpArr = res.page.list || [];
      } else {
        this.helpArr.push(...res.page.list);
      }
      this.totalPage = res.page.totalPage;
    },
  },
};
</script>
<style lang="less" scoped>
.header {
  img {
    width: 100%;
    height: 150px;
    margin-top: 40px;
    display: block;
  }
}
.content {
  .content-title {
    display: flex;
    padding: 20px;
    h3 {
      font-size: 18px;
      font-weight: 700;
      margin-left: 12px;
    }
  }
  .content-contents {
    width: 95%;
    height: 60px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.16);
    .van-cell__left-icon {
      font-size: 25px;
    }
    .van-cell__title {
      margin-left: 5px;
      span {
        font-size: 15px;
        font-weight: 700;
      }
    }
  }
}
</style>
